<template>
  <div class="tableContentBox">
    <el-row :gutter="20" class="content">
      <el-col :span="4" class="leftBox">
        <div class="attribute" :class="activeLeft==1?'activeLeft':''" @click="cheageLeft(1)">
          <i class="icon el-icon-monitor" />
          <span class="titel">页面属性</span>
        </div>
        <div class="attribute" :class="activeLeft==2?'activeLeft':''" @click="cheageLeft(2)">
          <i class="icon el-icon-film" />
          <span class="titel">表格属性</span>
        </div>
        <el-collapse-transition>
          <div v-if="activeLeft==2" class="tableTitleData">
            <div
              v-for="(item, index) in tableTitleData"
              :key="index"
              class="tableText"
              :class="item.prop==cellHighlight.prop?'activeText':''"
              @click="chooseRow(item)"
            >
              {{ item.label }}
              <i class="el-icon-error" @click.stop="deleteTitle(index)" />
            </div>
            <div class="tableText" @click="addTitle">
              添加
            </div>
          </div>
        </el-collapse-transition>

      </el-col>
      <el-col
        :span="15"
        class="tableBox"
        :style="{
          'padding-top': form1.top + 'px',
          'padding-bottom': form1.bottom + 'px',
          'padding-left': form1.left + 'px',
          'padding-right': form1.right + 'px'
        }"
      >
        <el-table
          :data="tableInfo.tableData"
          :align="tableInfo.align"
          :border="tableInfo.border"
          :header-cell-style="cellStyle"
          :cell-style="cellStyle"
        >
          <el-table-column
            v-for="(item, index) in tableTitleData"
            :key="`col_${index}`"
            :prop="item.prop"
            :label="item.label"
            :width="item.width || ''"
            :align="item.align"
            :style="item.style"
          />
        </el-table>
      </el-col>
      <el-col :span="5" class="rightBox">
        <!--        纸张属性配置-->
        <div v-if="activeLeft==1" class="formBox">
          <div class="title">页面配置</div>
          <el-form ref="form" :model="form1" label-width="80px">
            <el-form-item label="纸张类型">
              <el-select v-model="form1.size" placeholder="请选择纸张类型">
                <el-option label="A3(297*420)" value="297*420" />
                <el-option label="A4(210*279)" value="210*279" />
                <el-option label="A5(148*210)" value="148*210" />
                <el-option label="B5(182*257)" value="182*257" />
              </el-select>
            </el-form-item>
            <el-form-item label="上边距">
              <el-input v-model="form1.top" />
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="form1.bottom" />
            </el-form-item>
            <el-form-item label="左边距">
              <el-input v-model="form1.left" />
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="form1.right" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveForm1">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activeLeft==2&&!cellHighlight.prop" class="formBox">
          <div class="title">表格配置</div>
          <el-form ref="form" :model="form2" label-width="80px">

            <el-form-item label="对齐方式">
              <el-select v-model="form2.align" placeholder="请选择纸张类型">
                <el-option label="居中" value="center" />
                <el-option label="左对齐" value="left" />
                <el-option label="右对齐" value="right" />
              </el-select>
            </el-form-item>
            <el-form-item label="表格边框">
              <el-switch v-model="form2.border" />
            </el-form-item>
          </el-form>
        </div>

        <div v-if="activeLeft==2&&cellHighlight.prop" class="formBox">
          <div class="title">字段配置</div>
          <el-form ref="form" :model="form3" label-width="80px">
            <el-form-item label="id">
              <el-input v-model="form3.id" disabled />
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="form3.label" />
            </el-form-item>
            <el-form-item label="宽度">
              <el-input v-model="form3.width" />
            </el-form-item>
            <el-form-item label="对齐方式">
              <el-select v-model="form3.align" placeholder="请选择纸张类型">
                <el-option label="居中" value="center" />
                <el-option label="左对齐" value="left" />
                <el-option label="右对齐" value="right" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  filters: {
    tableSize(size) {
      console.log(size)
      const width = size.split('*')[0]
      const height = size.split('*')[1]
      return { 'width': width + 'mm', 'height': height + 'mm' }
    }
  },
  data() {
    return {
      activeLeft: 1, // 左侧激活
      // tableTitleData: ['第一列', '第二列', '第三列'], // 表头数据
      tableTitleData: [
        { 'label': '日期', 'prop': 'date', 'id': '17e7ab8', 'width': '', 'align': 'center', 'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }},
        { 'label': '姓名', 'prop': 'name', 'id': '198c5a0', 'width': '', 'align': 'center', 'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }},
        { 'label': '地址', 'prop': 'address', 'id': '95522e', 'width': '', 'align': 'center', 'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }},
        { 'label': '年龄', 'prop': 'age', 'id': '56e5538', 'width': '', 'align': 'center', 'style': { 'font-size': '18px', 'font-weight': '600', 'color': '#000' }}
      ], // 表头数据
      tableInfo: {
        tableData: [
          { date: '2016-05-02 14:25', name: '张三', address: '上海市普陀区金沙江路 1518 弄', age: '18' }
          // { date: '2016-05-04 14:25', name: '李四', address: '上海市普陀区金沙江路 1517 弄', age: '19' },
          // { date: '2016-05-01 14:25', name: '王五', address: '上海市普陀区金沙江路 1519 弄', age: '20' },
          // { date: '2016-05-03 14:25', name: '朱七', address: '上海市普陀区金沙江路 1516 弄', age: '30' }
        ],
        align: 'center',
        border: true
      },
      // 表格选中组件
      cellHighlight: {
        type: null, // 选中类型
        prop: null, // 选中id或编码
        _form: null, // 该类型表单
        _item: null // 该类型数据
      },
      //  页面配置的表单
      form1: {
        size: '297*420',
        top: 20,
        bottom: 20,
        left: 20,
        right: 25
      },
      form2: {
        align: 'center',
        border: true
      },
      form3: {
        id: '',
        label: '',
        width: ''
      }

    }
  },
  watch: {
    'form2.align': function(newVal) {
      this.tableTitleData = this.tableTitleData.map(item => {
        item.align = newVal
        return item
      })
    },
    'form2.border': function(newVal) {
      this.tableInfo.border = newVal
    }

  },
  mounted() {
  },

  created() {
    console.log(this.getID())
  },
  methods: {
    // 保存页面表单数据
    saveForm1() {
      console.log(this.form1.size)
    },
    // 把数据转化为表头数据
    // getTableTitle() {
    //   for (var key in this.tableInfo.tableData[0]) {
    //     this.tableTitleData.push({ 'label': key, prop: 'prop' + this.tableTitleData.length, 'width': '', 'align': 'center' })
    //   }
    // },
    // 获取唯一ID
    getID() {
      return parseInt(new Date().getMilliseconds() + '' + Math.ceil(Math.random() * 100000)).toString(16)
    },
    // 左侧状态改变
    cheageLeft(num) {
      this.activeLeft = num
    },
    //  添加表头
    addTitle() {
      this.$prompt('请输入表头', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.tableTitleData.push({
          'label': value,
          prop: 'prop' + this.tableTitleData.length,
          'id': '56e5538',
          'width': '',
          'align': 'center'
        })
        this.$message({
          type: 'success',
          message: '添加成功: ' + value
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 删除表头
    deleteTitle(index) {
      this.$confirm('此操作将永久删除该表头, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableTitleData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 表格编剧
    tableMargin() {
      // const width = this.form1.size.split('*')[0]
      // const height = this.form1.size.split('*')[1]
      return {
        'margin-top': this.form1.top + 'px',
        'margin-bottom': this.form1.bottom + 'px',
        'margin-left': this.form1.left + 'px',
        'margin-right': this.form1.right + 'px'
      }
    },
    // 表格样式
    cellStyle({ column }) {
      // console.log(column)
      // if (this.cellHighlight.type === 'columnComponents') {
      //
      // }
      if (this.cellHighlight.property === column.property) {
        return {
          'background-color': '#67C23A',
          color: '#ffffff'
        }
      }
    },
    // 选中单元格
    chooseRow(item) {
      if (this.cellHighlight.prop === item.prop) {
        this.cellHighlight = {
          prop: null, // 选中id或编码
          _item: null // 该类型数据
        }
        return
      }
      this.cellHighlight = {
        prop: item.prop,
        property: item.prop,
        _item: item
      }
      this.form3 = item
    }
  }
}
</script>
<style scoped lang="scss">
.tableContentBox {
  width: 100%;
  height: 100%;
  position: absolute;

  .content {
    width: 100%;
    height: 100%;

    .leftBox {
      //background: #0a76a4;
      height: 100%;

      .attribute {
        font-size: 14px;
        color: #222;
        margin: 10px;
        padding: 8px 0;
        padding-left: 15px;
        display: flex;
        align-items: center;
        cursor: pointer;

        .icon {
          color: #666;
          font-size: 18px;
        }

        .titel {
          margin-left: 5px;
        }
      }

      .activeLeft {
        background: #0a76a4;
        color: #ffffff;

        .icon {
          color: #ffffff;
        }
      }

      .tableTitleData {
        margin: 10px 0 10px 20px;
        display: flex;
        flex-wrap: wrap;

        .tableText {
          position: relative;
          padding: 8px;
          border: 1px solid #999999;
          background: #c5bcbc;
          border-radius: 5px;
          font-size: 12px;
          color: #000000;
          margin-right: 5px;
          margin-top: 10px;
          cursor: pointer;

          .el-icon-error {
            position: absolute;
            right: 0;
            top: -3px;
          }
        }

        .activeText {
          background: #67C23A;
          color: #ffffff;
        }
      }
    }

    .tableBox {
      //background: #c48642;
      height: 100%;

    }

    .rightBox {

      //background: #722675;
      padding-top: 20px;
      height: 100%;
      overflow: auto;

      .formBox {
        .title {
          font-size: 18px;
          font-weight: 500;

        }

      }
    }
  }
}
</style>
